<template>
	<div class="mediaAccount">
		<el-drawer :visible.sync="visible" size="90%" @close="close" title="子列表" destroy-on-close>
			<template #title>
				<div style="color:#333;font-size: 19px;">子账户列表</div>
			</template>
			<div class="line"></div>
			<cl-crud ref="crud" @load="onLoad" :on-refresh="onRefresh">
				<el-row style="height: 100%" type="flex">
					<cl-flex1 style="overflow: hidden">
						<cl-pagefull @resize="onResize">
							<template #head>
								<el-row type="flex">
									<cl-flex1 />
									<div>
										<cl-filter-group v-model="params" class="pr-0">
											<cl-filter label="账户/ID">
												<el-input v-model="params.keyword" placeholder="请输入账户名称 / ID" clearable
													style="width: 170px" />
											</cl-filter>
										</cl-filter-group>
									</div>
								</el-row>
							</template>

							<div style="height: 100%">
								<cl-table v-bind="table">
									<cl-empty slot="empty" />
									<template #header-bra_name>
										<div style="text-align: center">所属品牌</div>
									</template>
									<template #header-user_name>
										<div style="text-align: center">推广人</div>
									</template>
									<template #header-account>
										<div style="text-align: center">账户信息</div>
									</template>
									<template #header-balance>
										<div style="text-align: center">余额</div>
									</template>
									<template #header-access_token_status>
										Token
										<el-tooltip placement="top">
											<span slot="content">如遇Token异常，请重新授权</span>
											<i class="el-icon-warning"></i>
										</el-tooltip>
									</template>
									<template #header-status>
										状态
										<el-tooltip placement="top">
											<span slot="content">如遇账户状态异常，请重新授权</span>
											<i class="el-icon-warning"></i>
										</el-tooltip>
									</template>
									<template #header-grab_status>
										是否采集
										<el-tooltip placement="top">
											<span slot="content">决定是否采集数据，如消耗、余额等</span>
											<i class="el-icon-warning"></i>
										</el-tooltip>
									</template>
									<template #header-xianfen_status>
										先锋计划
										<el-tooltip placement="top">
											<span slot="content">决定是否采集数据，如消耗、余额等</span>
											<i class="el-icon-warning"></i>
										</el-tooltip>
									</template>
									<template #column-account="{ scope: { row } }">
										<div class="ml20">{{ row.advertiser_name }}</div>
										<div class="ml20">id:{{ row.advertiser_id }}</div>
										<div class="ml20">更新时间:{{ row.update_time }}</div>
									</template>
									<template #column-access_token_status="{ scope: { row } }">
										<el-tag :type="
											row.access_token_status === 1
												? 'primary'
												: 'danger'
										">
											{{ row.access_token_status == 1 ? "有效" : "无效" }}
										</el-tag>
									</template>
									<template #column-balance="{ scope: { row } }">
										<div class="ml20">{{ row.balance }}
											<el-tooltip placement="right">
												<div slot="content" class="tooltipBox">
													<div class="left">
														<span>总余额(元):{{ row.balance }}</span><br />
														<span>可用余额(元):{{ row.valid_balance }}</span><br />
														<span>现金余额(元):{{ row.cash }}</span><br />
														<span>现金可用(元):{{ row.valid_cash }}</span>
													</div>
													<div class="right">
														<span>赠款余额(元):{{ row.grants }}</span><br />
														<span>赠款可用(元):{{ row.valid_grant }}</span>
													</div>
												</div>
												<i class="el-icon-warning"></i>
											</el-tooltip>
										</div>
										<div class="ml20">
											更新时间:{{row.fund_time}}
										</div>
									</template>
									<template #column-status="{ scope: { row } }">
										<el-tag :type="
											row.status == 1
												? 'primary'
												: 'danger'
										">
											{{ row.status == 1 ? "正常" : "异常" }}
										</el-tag>
									</template>
									<template #column-user_name="{ scope: { row } }">
										<div v-if="row.user_name && row.user_name !== '-'">
											<div class="ml20">{{ row.user_name }}</div>
											<div class="ml20">{{ row.dept_name }}</div>
										</div>
										<div v-else></div>
									</template>
									<template #column-grab_status="{ scope: { row } }">
										<el-switch v-model="row.grab_status" :active-value="1" :inactive-value="0"
											@change="changeSwitch(row)" />
									</template>
									<template #column-xianfen_status="{ scope: { row } }">
										<el-switch v-model="row.xianfen_status" :active-value="1" :inactive-value="2"
											@change="xianfengChange(row)" />
									</template>
									<template #column-opt="{ scope: { row } }">
										<div>
											<el-button type="warning" @click="distributor(row)">
												{{
														row.supplie_id && row.supplie_id !== "-"
															? "换绑"
															: "绑定"
												}}广告账户
											</el-button>
										</div>
									</template>
								</cl-table>
							</div>
							<template #foot>
								<el-row type="flex">
									<cl-flex1 />
									<zm-pagination />
								</el-row>
							</template>
						</cl-pagefull>
					</cl-flex1>
				</el-row>
				<!-- 绑定或换绑广告账户 -->
				<binding-distributor-form ref="bindingDistributorFormRef" @refresh="refresh" />
			</cl-crud>
		</el-drawer>
	</div>
</template>

<script>
import bindingDistributorForm from "./binding-distributor-form";
import axios from "axios";
export default {
	name: "SetPromotionmediaAccountChild",
	components: { bindingDistributorForm },
	data() {
		return {
			visible: false,
			table: {
				"context-menu": ["refresh"],
				props: {
					"row-key": "advertiser_id",
					"default-expand-all": true,
					maxHeight: 500
				},
				columns: [
					{
						label: "所属品牌",
						prop: "bra_name",
						minWidth: 150,
						showOverflowTooltip: true
					},
					{
						label: "媒体平台",
						prop: "adv_name",
						minWidth: 120,
						showOverflowTooltip: true
					},
					{
						label: "账户信息",
						prop: "account",
						minWidth: 200,
						align: "left",
						showOverflowTooltip: true
					},
					{ label: "余额", prop: "balance", width: 220, align: "left" },
					{
						label: "绑定广告账户",
						prop: "advertiser_id",
						minWidth: 200,
						showOverflowTooltip: true
					},
					{
						label: "推广人",
						prop: "user_name",
						minWidth: 220,
						align: "left",
						showOverflowTooltip: true
					},
					{ label: "Token", prop: "access_token_status", width: 100 },
					{ label: "状态", prop: "status", width: 100 },
					{ label: "授权应用", prop: "app_name", width: 120 },
					{ label: "是否采集", prop: "grab_status", width: 100 },
					{ label: "先锋计划", prop: "xianfen_status", width: 100 },
					{
						label: "操作",
						prop: "opt",
						width: 120,
						fixed: "right",
						disable: true,
						align: "left"
					}
				]
			},
			list: [],
			load: false,
			params: {
				keyword: '',
				biz_id: '',
				parent_advertiser_id: ''
			}
		};
	},
	methods: {
		async open(row) {
			this.params.biz_id = row.biz_id
			this.params.parent_advertiser_id = row.advertiser_id
			this.visible = true;
		},
		onLoad({ ctx, app }) {
			ctx.service(this.$service.config)
				.set("dict", {
					api: {
						page: "mediaAccountChildList"
					}
				})
				.done();
			app.refresh(this.params);
		},
		async onRefresh(params, { next, done, render }) {
			let { biz_id, parent_advertiser_id } = this.params;
			let { list } = await next({
				...params,
				biz_id,
				parent_advertiser_id
			});
			console.log(list);
			render(list);
		},
		close() {
			this.visible = false;
		},
		//采集开关的状态
		async changeSwitch(row) {
			console.log(row);
			if (!row.grab_status) {
				let res = await axios.get("https://adxh.xmzmmr.com/Auth/removeAdv", {
					params: { id: row.id }
				});
				if (res.data.code === 200) {
					this.$message.success("操作成功");
				} else {
					this.$message.warning("操作失败，请重试");
				}
			} else {
				let res = await axios.get("https://adxh.xmzmmr.com/Auth/recoveryAdv", {
					params: { id: row.id }
				});
				if (res.data.code === 200) {
					this.$message.success("操作成功");
				} else {
					this.$message.warning("操作失败，请重试");
				}
			}
			this.refresh(_, false)
		},
		//先锋计划开关的状态
		async xianfengChange(row) {
			console.log(row);
			if (row.xianfen_status === 2) {
				let res = await axios.get("https://adxh.xmzmmr.com/Auth/removeXianfen", {
					params: { id: row.id }
				});
				console.log(res);
				if (res.data.code === 200) {
					this.$message.success("操作成功");
				} else {
					this.$message.warning("操作失败，请重试");
				}
			} else {
				let res = await axios.get("https://adxh.xmzmmr.com/Auth/recoveryXianfen", {
					params: { id: row.id }
				});
				if (res.data.code === 200) {
					this.$message.success("操作成功");
				} else {
					this.$message.warning("操作失败，请重试");
				}
			}
			this.refresh(_, false)
		},
		// crud刷新
		refresh(_, reset = true) {
			console.log(reset);
			let params = { ...this.params };
			if (reset) {
				params.page = 1;
			}
			this.$refs.crud.refresh(params);
			this.load = true;
		},
		//绑定广告账户
		distributor(row) {
			this.$refs.bindingDistributorFormRef.open(row);
		},
		onResize(h) {
			this.table.props.maxHeight = h;
		}
	}
};
</script>

<style lang="scss" scoped>
.ml20 {
	margin-left: 20px;
}

.title {
	font-size: 20px;
	text-align: center;
}

.tooltipBox {
	display: flex;
	// box-sizing: border-box;
	// width: 260px;
	line-height: 20px;
	white-space: nowrap;

	.left {
		width: 50%;
	}

	.right {
		margin-left: 30px;
		width: 50%;
	}
}

.mediaAccount {
	text-align: center;

	.line {
		position: absolute;
		top: 60px;
		width: 100%;
		border-top: 1px solid #e5e6eb;
	}
}
</style>
